<template>
  <div class="home">
    <van-nav-bar
      title="申请退款"
      class="nav_bar"
      fixed
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="box">
      <div class="orderInfo">
        <van-image class="icon" :src="chooseGoods.image" />
        <div class="order_name">{{ chooseGoods.goodsName }}</div>
        <div class="price">
          <div>￥{{ chooseGoods.skuPrice }}</div>
          <div class="num">x{{ chooseGoods.num }}</div>
        </div>
      </div>
      <van-cell-group :border="false">
        <!-- <van-cell :border="false" required>
          <template #title>
            <span class="cell_title">申请服务</span>
          </template>
          <template>
            <span class="cell_value">仅退款</span>
          </template>
        </van-cell> -->
        <van-cell
          :border="false"
          required
          is-link
          center
          @click="showPicker = true"
        >
          <template #title>
            <span class="cell_title">售后原因</span>
          </template>
          <template>
            <span class="cell_value">{{ form.reason }}</span>
          </template>
        </van-cell>
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="goodsColumns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
        <van-field
          v-model="form.price"
          label="退款金额"
          placeholder="请输入退款金额"
          required
          type="number"
          :border="false"
          input-align="right"
        />
        <van-cell :border="false" required>
          <template #title>
            <span class="cell_title">售后说明</span>
          </template>
          <template #label>
            <van-field
              v-model="form.message"
              rows="5"
              autosize
              maxlength="200"
              show-word-limit
              type="textarea"
              placeholder="不超过200字..."
              class="textarea"
            />
          </template>
        </van-cell>
        <van-cell name="uploader" required>
          <template #title>
            <span class="cell_title">上传凭证(最多三张)</span>
          </template>
          <template #label>
            <van-uploader
              v-model="fileList"
              :max-count="3"
              :after-read="afterRead"
              :before-delete="beforeDel"
            />
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="submit_box">
      <div class="btn" @click="submit">提交申请</div>
    </div>
  </div>
</template>

<script>
import api from "@/api/api";
export default {
  components: {},
  props: {},
  data() {
    return {
      showPicker: false,
      form: {
        num: 0,
        message: "",
        picList: [],
        reason: "",
        price: 0,
      },
      reason: "",
      orderSn: "",
      fileList: [],
      detail: {},
      goodsList: [],
      chooseGoods: {},
      goodsColumns: [],
    };
  },
  watch: {},
  computed: {},
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onConfirm(value) {
      this.form.reason = value;
      this.showPicker = false;
    },
    async getOrderDetail() {
      let res = await api.orderDetail({
        orderSn: this.orderSn,
      });
      this.detail = res.order;
      this.goodsList = res.orderItems;
      if (this.goodsList.length == 1) {
        this.chooseGoods = this.goodsList[0];
        this.form.num = this.chooseGoods.num;
        this.form.price = this.chooseGoods.flowPrice;
      } else {
        this.goodsList.forEach((item) => {
          this.goodsColumns.push(item.goodsName);
        });
      }
    },
    afterRead(files) {
      let piclist = Array.isArray(files) ? files : [files];
      piclist.forEach(async (item) => {
        item.status = "uploading";
        item.message = "上传中...";
        const data = new FormData();
        data.append("file", item.file);
        let res = await api.upload(data);
        this.form.picList.push(res);
        item.status = "down";
        item.message = "";
      });
    },
    beforeDel(file, detail) {
      this.form.picList.splice(detail.index, 1);
      this.fileList.splice(detail.index, 1);
    },
    async afterSaleReason() {
      let res = await api.getRefundReson({
        serviceType: 1,
      });
      res.forEach((item) => this.goodsColumns.push(item.reason));
    },
    async submit() {
      if (!this.form.reason) {
        this.$toast("请选择售后原因");
        return;
      } else if (!this.form.price) {
        this.$toast("请输入退款金额");
        return;
      } else if (!this.form.message) {
        this.$toast("请输入售后说明");
        return;
      } else if (!this.form.picList.length) {
        this.$toast("请上传凭证");
        return;
      }

      let params = {
        applyRefundPrice: this.form.price, //申请退款金额
        goodsId: this.chooseGoods.goodsId, //商品ID
        images: this.form.picList, //售后图片
        orderItemSn: this.chooseGoods.sn, //订单Sn
        orderSn: this.detail.orderSn, //订单Sn
        problemDesc: this.form.message, //问题描述
        reason: this.form.reason, //申请原因
        refundWay: 0,
        serviceType: 1,
        num: this.form.num,
        skuId: this.chooseGoods.skuId, //货品ID
      };
      this.$toast.loading({
        duration: 0,
        forbidClick: true,
      });
      await api.refund(params);
      this.$toast.success("申请成功");
      setTimeout(() => {
        this.$router.back();
      }, 500);
    },
  },
  created() {},
  mounted() {
    this.orderSn = this.$route.query.sn;
    this.getOrderDetail();
    this.afterSaleReason();
  },
};
</script>
<style lang="less" scoped>
.home {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/4431a33cd62f4efc9fc53a7606eee382.png")
    no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  box-sizing: border-box;
  padding: 130px 50px 150px 50px;

  .nav_bar {
    /deep/ .van-icon {
      font-size: 50px;
      font-weight: bold;
      color: #333333;
    }
  }

  .box {
    margin-top: 100px;
    padding: 50px;
    border-radius: 25px;
    background-color: #fff;
    .orderInfo {
      display: flex;
      justify-content: space-between;
      .icon {
        width: 250px;
        height: 250px;
      }
      .order_name {
        font-size: 40px;
        color: #888888;
        max-width: 590px;
      }
      .price {
        font-size: 40px;
        color: #888888;
        .num {
          margin-top: 15px;
          text-align: end;
        }
      }
    }
    .cell_title {
      font-size: 50px;
      font-weight: bold;
    }
    .cell_value {
      font-size: 46px;
      color: #c10500;
    }

    .textarea {
      padding: 20px;
      background: #f8f8f8;
    }

    /deep/ .van-cell__right-icon {
      display: flex;
      align-items: center;
    }
  }

  .submit_box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    .btn {
      padding: 15px 80px;
      color: #fff;
      font-size: 56px;
      background: #058efb;
      border-radius: 999px;
    }
  }
}
</style>
